<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAllCourseClassify, addCourseClassify, deleteCourseClassify, updateCourseClassify } from '@/api/course'

const classifyList = ref([])
const loading = ref(false)

// 新增分类弹窗相关
const showAddDialog = ref(false)
const addForm = ref({ classifyName: '' })
const addLoading = ref(false)

// 编辑分类弹窗相关
const showEditDialog = ref(false)
const editForm = ref({ classifyId: '', classifyName: '', description: '' })
const editLoading = ref(false)

const loadClassifyList = async () => {
  loading.value = true
  try {
    const res = await getAllCourseClassify()
    if ((res.code === 0 || res.code === 200) && res.data) {
      classifyList.value = res.data.records || []
    } else {
      ElMessage.error(res.message || '获取课程分类失败')
    }
  } finally {
    loading.value = false
  }
}

const handleAddClassify = () => {
  addForm.value = { classifyName: '' }
  showAddDialog.value = true
}

const handleAddSubmit = async () => {
  if (!addForm.value.classifyName) {
    ElMessage.error('分类名称不能为空')
    return
  }
  addLoading.value = true
  try {
    await addCourseClassify({ classifyName: addForm.value.classifyName })
    ElMessage.success('分类添加成功')
    showAddDialog.value = false
    loadClassifyList()
  } catch (e) {
    ElMessage.error('分类添加失败')
  } finally {
    addLoading.value = false
  }
}

// 删除分类
const handleDeleteClassify = (row) => {
  ElMessageBox.confirm(`确定要删除分类“${row.classifyName}”吗？删除后不可恢复。`, '删除确认', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
    confirmButtonClass: 'el-button--danger'
  }).then(async () => {
    try {
      const res = await deleteCourseClassify(row.classifyId)
      if ((res.code === 0 || res.code === 200)) {
        ElMessage.success('删除成功')
        loadClassifyList()
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    } catch (e) {
      ElMessage.error('删除失败')
    }
  }).catch(() => {})
}

// 打开编辑弹窗
const handleEditClassify = (row) => {
  editForm.value = { ...row }
  showEditDialog.value = true
}

// 提交编辑
const handleEditSubmit = async () => {
  if (!editForm.value.classifyName) {
    ElMessage.error('分类名称不能为空')
    return
  }
  editLoading.value = true
  try {
    const res = await updateCourseClassify({
      classifyId: editForm.value.classifyId,
      classifyName: editForm.value.classifyName,
      description: editForm.value.description
    })
    if (res.code === 0 || res.code === 200) {
      ElMessage.success('分类更新成功')
      showEditDialog.value = false
      loadClassifyList()
    } else {
      ElMessage.error(res.message || '更新失败')
    }
  } finally {
    editLoading.value = false
  }
}

onMounted(() => {
  loadClassifyList()
})
</script>

<template>
  <div class="course-classify-manage-container">
    <el-card class="classify-list">
      <template #header>
        <div class="card-header">
          <h2>课程分类管理</h2>
          <el-button type="primary" @click="handleAddClassify">添加分类</el-button>
        </div>
      </template>
      <el-table :data="classifyList" v-loading="loading" style="width: 100%">
        <el-table-column prop="classifyId" label="ID" width="80" />
        <el-table-column prop="classifyName" label="分类名称" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEditClassify(row)">编辑</el-button>
            <el-button type="danger" link @click="handleDeleteClassify(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="showAddDialog" title="添加课程分类" width="400px">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="分类名称" required>
          <el-input v-model="addForm.classifyName" placeholder="请输入分类名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" :loading="addLoading" @click="handleAddSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="showEditDialog" title="编辑课程分类" width="400px">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="分类名称" required>
          <el-input v-model="editForm.classifyName" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editForm.description" placeholder="可选，分类描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" :loading="editLoading" @click="handleEditSubmit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.course-classify-manage-container {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}
.classify-list {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-table {
  border-radius: 8px;
  overflow: hidden;
}
.el-table th, .el-table td {
  font-size: 14px;
  color: #333;
  background: #f8fbff;
}
.el-table th {
  font-weight: 700;
  background: #f0f7ff;
}
.el-table tr {
  transition: background 0.2s;
}
.el-table tr:hover {
  background: #f5faff;
}
.el-button[type="primary"], .el-button--primary {
  background: linear-gradient(90deg, #409eff 60%, #66b1ff 100%);
  border: none;
  color: #fff;
  border-radius: 20px;
  font-weight: 500;
  transition: box-shadow 0.2s;
}
.el-button[type="primary"]:hover, .el-button--primary:hover {
  box-shadow: 0 2px 8px rgba(64,158,255,0.15);
}
</style> 